import React, {useEffect, useState} from 'react';
import styles from './baseInfo.module.less';
import {Button, Card, Col, List, Row, Spin} from "antd";
import {
    CommentOutlined, NotificationOutlined, UserOutlined, AntDesignOutlined

} from '@ant-design/icons';
import {Avatar, Tooltip} from 'antd';
import {useTranslation} from 'react-i18next';
import LineCharts from "../../components/HighCharts/LineCharts";
import PieDonut from "../../components/HighCharts/PieDonutCharts";
import Column3DChart2 from "../../components/HighCharts/3DColumn2";
import BasicBarCharts from "../../components/HighCharts/BasicBar";
import Logarithmic from "../../components/HighCharts/Logarithmic";

import {getStatisticalCenterApi} from '@src/services/statisticalCenter';

const data = [
    {
        title: '北京东宝数据中心跳线',
    },
    {
        title: '寻找哈萨克斯坦 8G 16核 VM',
    },
    {
        title: '21vianet Taibei 敦南 IDC 机柜',
    },
    {
        title: '新加坡-深圳 100M DCI',
    },
    {
        title: '新加坡-深圳 100M DCI',
    },
];


const DataInfo = () => {
    const {t} = useTranslation();

    const [getDataLoading, setGetDataLoading] = useState(false);
    const [statisticalCenterData, setStatisticalCenterData] = useState({});

    useEffect(() => {
        onLoad();
    }, []);

    const onLoad = async () => {
        setGetDataLoading(true);
        const res = await getStatisticalCenterApi();
        if (!res) return;
        console.log(res)
        setGetDataLoading(false);
        setStatisticalCenterData(res);
    }

    return (
        <Spin spinning={getDataLoading}>
            <Row>
                <Col span={12} className={styles.leftSpan}>
                    <div className={styles.leftSpanBG}>
                        <div className={`${styles.centerSpanBG} ${styles.mgt20}`}>
                            <LineCharts statisticalCenterData={statisticalCenterData}/>
                        </div>
                        <div>
                            <BasicBarCharts statisticalCenterData={statisticalCenterData}/>
                        </div>
                    </div>

                </Col>


                <Col span={6} className={styles.centerSpan}>
                    <div className={`${styles.centerSpanBG} ${styles.compInfoBase}`}>
                        <Column3DChart2/>
                    </div>
                    <div className={`${styles.centerSpanBG} ${styles.mgt20}`}>
                        <Row className={`${styles.dataInfo} ${styles.mgt20}`} style={{minHeight: '380px'}}>
                            <Logarithmic statisticalCenterData={statisticalCenterData}/>
                        </Row>
                    </div>
                </Col>

                <Col span={6} className={styles.rightSpan}>
                    <div className={styles.rightSpanBG}>
                        <h1 className={styles.compTitle}>{t('My published requirements')}</h1>
                        <List
                            itemLayout="horizontal"
                            dataSource={data}
                            renderItem={(item, index) => (
                                <List.Item>
                                    <List.Item.Meta
                                        // avatar={<Avatar src={`/img/placeholder.jpg`} />}
                                        title={<a href="">{item.title}</a>}
                                        description=""
                                    />
                                </List.Item>
                            )}
                        />
                    </div>


                    <div className={`${styles.rightSpanBG} ${styles.mgt20}`}>
                        <Avatar.Group
                            size="large"
                            max={{
                                count: 2,
                                style: {
                                    color: '#f56a00',
                                    backgroundColor: '#fde3cf',
                                },
                            }}
                        >
                            <Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=3"/>
                            <Avatar
                                style={{
                                    backgroundColor: '#f56a00',
                                }}
                            >
                                K
                            </Avatar>
                            <Tooltip title="Ant User" placement="top">
                                <Avatar
                                    style={{
                                        backgroundColor: '#87d068',
                                    }}
                                    icon={<UserOutlined/>}
                                />
                            </Tooltip>
                            <Avatar
                                style={{
                                    backgroundColor: '#1677ff',
                                }}
                                icon={<AntDesignOutlined/>}
                            />
                        </Avatar.Group>
                        <span className={styles.followSpan}>
                            {t('Follow me')}
                        </span>

                        <div className={styles.mgt20}>
                            <PieDonut/>
                        </div>
                    </div>
                </Col>
            </Row>
        </Spin>
    );
};

export default DataInfo;
